<template>
  <div class="indent">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="grid-content bg-purple-dark" style="height: 120px;">
          <div class="indents">
            <el-row :gutter="5">
              <el-col :span="6">
                <span>订单状态：</span>
                <el-select v-model="value" clearable placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="6">
                <span>支付方式：</span>
                <el-select v-model="value" clearable placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="6">
                <!-- 时间选择 -->
                <div class="block">
                  <span class="demonstration">创建时间：</span>
                  <el-date-picker class="picker" v-model="value2" type="daterange" align="center" unlink-panels
                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
                    size="large" style="width: 250px;">
                  </el-date-picker>
                </div>
              </el-col>
              <el-col :span="6">
                <span>搜索：</span>
                <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                  <el-select v-model="select" slot="prepend" placeholder="请选择" class="selects">
                    <el-option label="餐厅名" value="1"></el-option>
                    <el-option label="订单号" value="2"></el-option>
                    <el-option label="用户电话" value="3"></el-option>
                  </el-select>
                  <!-- <el-button slot="append" icon="el-icon-search"></el-button> -->
                </el-input>
              </el-col>
            </el-row>
            <el-button type="primary" size="mini">查询</el-button>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <div class="grid-content bg-purple-light " style="height: 800px;">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="全部" name="全部">
              <!-- 显示数据的组件 -->
              <manageData :tableData="tableData"></manageData>
            </el-tab-pane>
            <el-tab-pane label="待发货" name="待发货">
              <!-- 显示数据的组件 -->
              <manageData :tableData="tableData"></manageData>
            </el-tab-pane>
            <el-tab-pane label="待收货" name="待收货">
              <!-- 显示数据的组件 -->
              <manageData :tableData="tableData"></manageData>
            </el-tab-pane>
            <el-tab-pane label="待评价" name="待评价">
              <!-- 显示数据的组件 -->
              <manageData :tableData="tableData"></manageData>
            </el-tab-pane>
            <el-tab-pane label="已完成" name="已完成">
              <!-- 显示数据的组件 -->
              <manageData :tableData="tableData"></manageData>
            </el-tab-pane>
            <el-tab-pane label="已删除" name="已删除">
              <!-- 显示数据的组件 -->
              <manageData :tableData="tableData"></manageData>
            </el-tab-pane>
            <el-tab-pane label="已退款" name="已退款">

              <!-- 显示数据的组件 -->
              <manageData :tableData="tableData"></manageData>
            </el-tab-pane>


          </el-tabs>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
            layout="total, sizes, prev, pager, next, jumper" :total="400" align="right">
          </el-pagination>
        </div>
      </el-col>
    </el-row>

  </div>
</template>
<script>
import manageData from './manageData.vue'
import { getOder } from '@/api'
export default {
  name: 'MyMain',
  components: {
    manageData
  },
  data() {
    return {
      status: "",
      // 日期选择
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value2: '',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      input3: '',
      select: '',
      activeName: 'first',
      //存放数据的数组，响应式
      tableData: [],
      multipleSelection: [],
      currentPage4: 4
    }
  },
  // 挂载后
  mounted() {
    //进入后调用接口返回数据
    this.getOList("全部");
  },
  methods: {
    handleClick(tab) {
      console.log(1111);
      console.log(tab.name);
      this.getOList(tab.name);
    },
    async getOList(status) {
      let { data } = await getOder(status)
      this.tableData = data.data
      console.log(this.tableData);
    }
    // toggleSelection(rows) {
    //   if (rows) {
    //     rows.forEach(row => {
    //       this.$refs.multipleTable.toggleRowSelection(row);
    //     });
    //   } else {
    //     this.$refs.multipleTable.clearSelection();
    //   }
    // },
    // handleSelectionChange(val) {
    //   this.multipleSelection = val;
    // }
    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`);
    // },
    // handleCurrentChange(val) {
    //   console.log(`当前页: ${val}`);
    // }
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/theme/handle.scss';

* {
  transition: .5s;
  @include font_color('titleColor');
  @include background_color('mainColor');
  @include border_color('mainColor');
  @include svg_color('fill');
}

.indent {
  padding: 10px;
  box-sizing: border-box;
}

.picker {
  width: 200px;
}

.el-row {
  margin-bottom: 16px;

  // margin-left: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #fff;
  font-size: 12px;

}

.bg-purple {
  background: #fff;
  padding: 20px;
  display: flex;
  justify-content: left;
  align-items: center;
}

.bg-purple-light {
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  // margin-left: 20px;
}

.row-bg {
  // padding: 10px 0;
  background-color: #fff;
}

// .el-select .el-option {
//   width: 130px;
// }
.input-with-select {
  // background-color: #fff; 
  width: 300px;
}

.indents {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.selects {
  width: 120px;
}
</style>
